<template>
    <div class="invite">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            代理列表
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="search-box">
                    <Row :gutter="16" style="min-width: 1024px">
                        <Col :span="6">
                            用户账号：
                            <Input v-model="search.account" placeholder="用户账号" style="width:auto"/>
                        </Col>
                        <Col :span="6">
                            用户昵称：
                            <Input v-model="search.name" placeholder="用户昵称" style="width:auto"/>
                        </Col>
                        <Col :span="6">
                            注册时间：
                            <DatePicker  v-model="time" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))" type="daterange" @on-change="returnDate" placement="bottom" placeholder="请选择时间" style="width: auto"></DatePicker>
                        </Col>
                        <Col :span="6">
                            <div class="search-btn" @click="select(selectBtn,'3')">查询</div>
                        </Col>
                    </Row>
                </div>

                <div class="btn-box">
                    <!-- <Button style="margin-left:10px" class="btn" :class="selectBtn === '0' ? 'on' : ''" @click="select('0')">APP邀请关系列表(100人)</Button> -->
                    <Button style="margin-left:10px" class="btn" :class="selectBtn === '1' ? 'on' : ''" @click="select('1','0')">一级代理({{userNum1}}人)</Button>
                    <Button style="margin-left:10px" class="btn" :class="selectBtn === '2' ? 'on' : ''" @click="select('2','0')">二级代理({{userNum2}}人)</Button>
                    <Button style="margin-left:10px" class="btn" :class="selectBtn === '3' ? 'on' : ''" @click="select('3','0')">三级代理({{userNum3}}人)</Button> 
                    <Button style="margin-left:10px" class="btn" :class="selectBtn === '4' ? 'on' : ''" @click="select('4','0')">直推用户({{userNum4}}人)</Button> 
                    <!-- <Button style="margin-left:10px" type="primary" class="btn" @click="exportData()">导出数据</Button> -->
                </div>

                <div class="table-box">
                    <!-- <p>{{tableTitle}}</p> -->
                    <el-table
                        ref="table"
                        :data="tableData"
                        size="mini"
                        style="width: 100%;min-width: 800px">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="id"
                            label="用户ID">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="account"
                            label="用户账号">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="name"
                            label="用户昵称">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="balance"
                            label="账户余额">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="rec_code"
                            label="推荐码">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="login_count"
                            label="登录次数">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="login_time"
                            label="上次登录时间">
                        </el-table-column>
                        <!-- <el-table-column
                            align="center"
                            label="抢单总收益">
                            <template slot-scope="scope">
                                <p>￥{{scope.row.earnings}}</p>
                            </template>
                        </el-table-column> -->
                        <!-- <el-table-column
                            align="center"
                            label="抢单总提成">
                            <template slot-scope="scope">
                                <p>￥{{scope.row.commission}}</p>
                            </template>
                        </el-table-column> -->
                        <el-table-column
                            align="center"
                            prop="create_time"
                            label="创建时间">
                        </el-table-column>
                        <!-- <el-table-column
                            label="操作"
                            width="200"
                            align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="look(scope.row.userId)">查看详情</el-button>
                                <el-button type="text" size="small" @click="lookShip(scope.row.userId)">查看关系</el-button>
                                <el-button type="text" size="small" @click="del">删除</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </div>

                <el-dialog title="代理关系" :visible.sync="dialogTableVisible">
                    <Button style="margin-left:10px" class="btn">一级代理(2000人)</Button>
                    <Button style="margin-left:10px" class="btn">二级代理(2000人)</Button>
                    <Button style="margin-left:10px" class="btn">三级代理(2000人)</Button>
                    <el-table :data="inviteData">
                        <el-table-column property="date" label="日期" width="150"></el-table-column>
                        <el-table-column property="name" label="姓名" width="200"></el-table-column>
                        <el-table-column property="address" label="地址"></el-table-column>
                    </el-table>
                </el-dialog>

                <div class="page-box">
                    <Page :total="total" :current="current_page" :page-size="pageSize" show-elevator show-total @on-change="pageChange"/>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    import store from "@/store/SessionStorageStore";
    import * as api from '@/api/api';
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                time: [],
                search: {
                    account: '',//用户账号/ID
                    name: '',//用户名称
                },
                condition: {
                    create_time: '',//日期
                },
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },//日期选择范围配置
                tableTitle: 'APP邀请关系列表',
                selectBtn: '1',
                //表格数据
                tableData: [],
                data1: [],
                data2: [],
                data3: [],
                data4: [],
                id1: '',
                id2: '',
                userNum1: 0,
                userNum2: 0,
                userNum3: 0, 
                userNum4: 0,
                dialogTableVisible: false,
                inviteData: [],
                total: 0,//数据总条数
                pageSize: 10,//每页显示条数
                current_page: 1,
            }
        },
        mounted(){
            this.getInviteList();
            this.getData4(0);
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            getInviteList() {
                let STORAGE_KEY = "Login";
                let userData = store.fetch(STORAGE_KEY);
                let body = {
                    model: 'Users',
                    with: {},
                    offset: this.current_page - 1,
                    limit: this.pageSize * 1,
                    condition: {
                        parent_id: userData ? userData.id : '2',
                        role_id: '0,!='
                    },
                    search: this.search
                };
                if(this.condition.create_time) {
                    body.condition = this.condition
                };
                this.loading.isLoading = true;
                //一级
                api.getDataList(body).then(res => {
                    if(res.data.code === 200) {
                        this.userNum1 = res.data.data.count;
                        this.total = res.data.data.count * 1;
                        this.data1 = res.data.data.data;
                        this.tableData = this.data1;
                        if(this.data1.length === 0) {
                            this.loading.isLoading = false;
                            return false;
                        }
                        for (const item of this.data1) {
                            if(this.id1) {
                                this.id1 = this.id1 + ' ' + item.id
                            }else {
                                this.id1 = this.id1 + item.id
                            }
                        }
                        this.id1 = this.id1 + ',in';
                        body.condition.parent_id = this.id1;
                        //二级
                        api.getDataList(body).then(res => {
                            if(res.data.code === 200) {
                                this.userNum2 = res.data.data.count;
                                if(res.data.data.data.length === 0) {
                                    this.loading.isLoading = false;
                                    return false;
                                }
                                for (const item of res.data.data.data) {
                                    if(this.id2) {
                                        this.id2 = this.id2 + ' ' + item.id
                                    }else {
                                        this.id2 = this.id2 + item.id
                                    }
                                }
                                this.id2 = this.id2 + ',in';
                                body.condition.parent_id = this.id2;
                                //三级
                                api.getDataList(body).then(res => {
                                    // this.loading.isLoading = false;
                                    if(res.data.code === 200) {
                                        this.userNum3 = res.data.data.count;
                                    }else {
                                        this.$Notice.error({
                                            title: '错误',
                                            desc: '服务器错误'
                                        });
                                    }
                                }).catch(err => {
                                    this.loading.isLoading = false;
                                    this.$Notice.error({
                                        title: '错误',
                                        desc: err
                                    });
                                })
                            }else {
                                this.loading.isLoading = false;
                                this.$Notice.error({
                                    title: '错误',
                                    desc: '服务器错误'
                                });
                            }
                        }).catch(err => {
                            this.loading.isLoading = false;
                            this.$Notice.error({
                                title: '错误',
                                desc: err
                            });
                        })
                    }else {
                        this.loading.isLoading = false;
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误'
                        });
                    }
                }).catch(err => {
                    this.loading.isLoading = false;
                    this.$Notice.error({
                        title: '错误',
                        desc: err
                    });
                })
            },

            getData1() {
                let STORAGE_KEY = "Login";
                let userData = store.fetch(STORAGE_KEY);
                let body = {
                    model: 'Users',
                    with: {},
                    offset: this.current_page - 1,
                    limit: this.pageSize * 1,
                    condition: {
                        parent_id: userData ? userData.id : '2',
                        role_id: '0,!='
                    },
                    search: this.search
                };
                if(this.condition.create_time) {
                    body.condition = this.condition
                };
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    this.loading.isLoading = false;
                    if(res.data.code === 200) {
                        this.total = res.data.data.count * 1;
                        this.tableData = res.data.data.data;
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误'
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: err
                    });
                })
            },

            getData2() {
                let STORAGE_KEY = "Login";
                let userData = store.fetch(STORAGE_KEY);
                let body = {
                    model: 'Users',
                    with: {},
                    offset: this.current_page - 1,
                    limit: this.pageSize * 1,
                    condition: {
                        parent_id: this.id1,
                        role_id: '0,!='
                    },
                    search: this.search
                };
                if(this.condition.create_time) {
                    body.condition = this.condition
                };
                if(!body.condition.parent_id) {
                    return false;
                }
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    this.loading.isLoading = false;
                    if(res.data.code === 200) {
                        this.total = res.data.data.count * 1;
                        this.tableData = res.data.data.data;
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误'
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: err
                    });
                })
            },

            getData3() {
                let STORAGE_KEY = "Login";
                let userData = store.fetch(STORAGE_KEY);
                let body = {
                    model: 'Users',
                    with: {},
                    offset: this.current_page - 1,
                    limit: this.pageSize * 1,
                    condition: {
                        parent_id: this.id2,
                        role_id: '0,!='
                    },
                    search: this.search
                };
                if(this.condition.create_time) {
                    body.condition = this.condition
                };
                if(!body.condition.parent_id) {
                    return false;
                }
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    this.loading.isLoading = false;
                    if(res.data.code === 200) {
                        this.total = res.data.data.count * 1;
                        this.tableData = res.data.data.data;
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误'
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: err
                    });
                })
            },

            getData4(state) {
                console.log('=====>')
                let STORAGE_KEY = "Login";
                let userData = store.fetch(STORAGE_KEY);
                let body = {
                    model: 'Users',
                    with: {},
                    offset: this.current_page - 1,
                    limit: this.pageSize * 1,
                    condition: {
                        parent_id: userData ? userData.id : '2',
                        role_id: '0'
                    },
                    search: this.search
                };
                if(this.condition.create_time) {
                    body.condition = this.condition
                };
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    this.loading.isLoading = false;
                    console.log(state)
                    this.userNum4 = res.data.data.count;
                    if(res.data.code === 200) {
                        if(state === 1) {
                            this.total = res.data.data.count * 1;
                            this.tableData = res.data.data.data;
                            this.userNum4 = res.data.data.count;
                        }else {
                            this.userNum4 = res.data.data.count;
                        }
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误'
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: err
                    });
                })
            },

            select(id,state) {
                if(state === '0') {
                    this.selectBtn = id;
                    this.search = {
                        account: '',//用户账号/ID
                        name: '',//用户名称
                    };
                    this.condition.time = '';
                    this.current_page = 1;
                };
                if(state === '3') {
                    this.current_page = 1;
                }
                if(id == '1') {
                    this.getData1();
                }else if(id == '2') {
                    this.getData2();
                }else if(id == '3') {
                    this.getData3();
                }else if(id == '4') {
                    this.getData4(1);
                }
            },

            pageChange(current_page) {
                this.current_page = current_page;
                this.select(this.selectBtn,'1')
            },

            returnDate(date) {
				if (date[0] == '') {
					this.condition.create_time = '';
					return false;
				}
				let newTime = '';
				for (let index = 0; index < date.length; index++) {
					let one = date[index];
					let time1 = one.split(' ')[0];
					if (index === 1) {
						newTime = newTime + '&' + time1 + ',between';
					} else {
						newTime = newTime + time1;
					}
				}
                this.condition.create_time = newTime;
                // console.log(this.search.create_time)
            },
            lookShip(id) {
                this.dialogTableVisible = true;
            }
        }  
    }
</script>


<style lang="less">
    @import '../../../assets/styles/constant.less';
    .invite{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .search-box{
                .search-btn{
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background-color: @greenColor;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                }
            }
            .btn-box{
                margin-top: 20px;
                display: flex;
                justify-content: flex-end;
                .btn{
                    background-color: #fff;
                    border: 1px solid #ddd;
                    color: #333;
                    &.on{
                        background-color: @greenColor !important;
                        color: #fff !important;
                    }
                }
            }
            .table-box{
                margin-top: 10px;
                width: 100%;
                .el-table th{
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }
                .el-button--text{
                    color: @greenColor;
                }
            }
            .page-box{
                height: 50px;
                line-height: 50px;
                text-align: right;
                background-color: #fff;
                padding: 0 20px;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>